<template>
  <div class="app-container">
    <el-form
      class="dialog-form"
      :rules="rules"
      ref="dataForm"
      :model="temp"
      label-position="left"
      label-width="120px"
    >
    <el-tabs type="border-card">
      <el-tab-pane label="基础信息">
        <el-form-item label="商户编号" prop="merchantNo">
          <span>{{temp.merchantNo}}</span>
        </el-form-item>

        <el-form-item label="登录名" prop="loginName">
          <el-input v-model.trim="temp.loginName" type="text" placeholder="登录名" style="width:300px;"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model.trim="temp.password" type="password" placeholder="密码"  style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="企业名称" prop="companyName">
          <el-input v-model.trim="temp.companyName" placeholder="企业名称"  style="width:300px;"></el-input>
        </el-form-item>

        <el-form-item label="企业地址" prop="companyAddress">
          <el-input v-model.trim="temp.companyAddress" type="email" placeholder="企业地址"  style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="企业法人" prop="compnayLegal">
          <el-input v-model.trim="temp.compnayLegal" placeholder="企业法人"  style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="账户类型" prop="accountType">
          <el-input v-model.trim="temp.accountType" placeholder="账户类型"  style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model.trim="temp.realName" placeholder="真实姓名"  style="width:300px;"></el-input>
        </el-form-item>

        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model.trim="temp.mobile" placeholder="手机号码"  style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="idCardNo">
          <el-input v-model.trim.number="temp.idCardNo" placeholder="身份证号码"  style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人" prop="contactUserName">
          <el-input v-model.trim="temp.contactUserName" placeholder="紧急联系人"  style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人电话" prop="contactMobile">
          <el-input v-model.trim="temp.contactMobile" placeholder="紧急联系人电话"  style="width:300px;"></el-input>
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="银行卡信息">
        <el-form-item label="银行名称" prop="bankName">
          <el-input v-model.trim="temp.bankForm.bankName" type="text" placeholder="登录名" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="bankSubName">
          <el-input v-model.trim="temp.bankForm.bankSubName" type="password" placeholder="密码"  style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="企业名称" prop="bankNo">
          <el-input v-model.trim="temp.bankForm.bankNo" placeholder="企业名称"  style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="是否默认银行卡">
          <el-radio-group v-model="temp.bankForm.defaultFlag">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-tab-pane>
    </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" size="mini" :loading="submiting" @click="submitFormAction">确定</el-button>
    </div>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor, Quill } from "vue-quill-editor";

export default {
  data() {
    return {
      checkList:[],
      container: false,
      total: 0,
      cmsList: [],
      list: [],
      roleList:[],
      temp: {
        bankForm:{},
      },
      editorOption: {
        placeholder: "在这里输入内容",
        modules: {}
      },
       rules: {
        loginName: [
          {
            required: true,
            message: "用户名",
            trigger: "change",
            max: 50
          }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "change" }
        ],
        companyName: [
          { required: true, message: "企业名称不能为空", trigger: "change" }
        ],
        companyAddress: [
          { required: true, message: "企业地址不能为空", trigger: "change" }
        ],
        compnayLegal: [
          { required: true, message: "企业法人不能为空", trigger: "change" }
        ],
        accountType: [
          { required: true, message: "账户类型不能为空", trigger: "change" }
        ],
        realName: [
          { required: true, message: "真实姓名不能为空", trigger: "change" }
        ],
        mobile: [
          { required: true, message: "手机号码不能为空", trigger: "change" }
        ],
         idCardNo: [
          { required: true, message: "身份证号码不能为空", trigger: "change" }
        ],
         contactUserName: [
          { required: true, message: "紧急联系人不能为空", trigger: "change" }
        ],
         contactMobile: [
          { required: true, message: "紧急联系人电话不能为空", trigger: "change" }
        ],
        bankName: [
          { required: true, message: "银行名称不能为空", trigger: "change" }
        ],
        email: [
          { required: true, message: "邮箱不能为空", trigger: "change" }
        ],
        bankSubName: [
          { required: true, message: "支行名称不能为空", trigger: "change" }
        ],
        reccommendChannel: [
          { required: true, message: "推荐渠道方不能为空", trigger: "change" }
        ],
        bankNo: [
          { required: true, message: "银行卡号不能为空", trigger: "change" }
        ],
        defaultFlag: [
          { required: true, message: "默认银行卡不能为空", trigger: "change" }
        ],
        mobile: [{ required: true, message: "手机不能为空",  },{
            pattern: /^1[0-9]{10}$/, message: '手机号码不正确!'
          }],
        
        idCardNo:[{ required: true, message: "手机不能为空", trigger: "change" },{
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号码不正确!'
          }],
      }
    };
  },
  components: {
    quillEditor
  },
  created() {
    this.generateNo();
  },
  methods: {
    generateNo(){
      this.$post('/admin/capital_merchant/generate_merchant_no')
      .then(data => {
        this.temp.merchantNo = data;
      })
    },
    submitFormAction() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.submiting = true;
          const postData = Object.assign({}, this.temp);
          for(var i in this.temp.bankForm){
             postData["bankForm." + i + ""] = this.temp.bankForm[i];
            // postData[i] = this.temp.bankForm[i]
          }
          console.log(postData)
          delete postData.bankForm;
          let url = "/admin/capital_merchant/add";
          // if (this.isEditing) {
          //   url = "/admin/manager/modify";
          // }
          this.$post(url, postData)
            .then(data => {
              this.$$notify("操作成功");
              this.dialogFormVisible = false;
              this.submiting = false;
              this.temp = {};

            })
            .finally(err => {
              this.submiting = false;
            });
        }
      });
    }
  }
};
</script>
<style>
.dialog-footer{
  padding-top: 20px;
  padding-left: 30px;
}
.el-table td,
.el-table th {
  padding: 1px 0;
}
.el-table {
  font-size: 12px;
}
.opencolor {
  color: red;
}
.openSearch {
  margin-bottom: 10px;
  padding-bottom: 5px;
}
</style>